<template>
    <van-field
    :class="{'active':focusIdx==config.key,'error':isError==true}"
    v-model="config.value"
    :label="config.label"
    :required="config.must"
    :readonly="config.readonly"
    :disabled="config.disabled"
    :placeholder="config.placeholder"
    :maxlength="config.maxlength"
    @focus="onFocus"
    @blur="onBlur"
    ></van-field>
</template>

<script>
export default {
    data() {
        return {
           focusIdx: null,
           isError: false
        };
    },
    props: ['config'],
    methods: {
        onFocus() {
            this.focusIdx = this.config.key;
        },
        onBlur() {
            this.focusIdx = null;
            if (/^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/.test(this.config.value) == false) {
                this.isError = true;
            } else {
                this.isError = false;
            }
        }
    },
    watch: {
        'config.value': function(val, oldVal) {
            this.$store.commit('SET_IDCARD', val);
            if (/^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/.test(val)) {
                this.isError = false;
            }
        }
    }
  };
</script>

<style>
</style>
